<template>
  <z-tree-select
    v-model:value="value"
    style="width: 240px"
    :tree-data="treeData"
    tree-default-expand-all
    :field-names="fieldNames"
    tree-node-label-prop="names"
  />
</template>
<script>
import { defineComponent, ref, computed } from 'vue'

export default defineComponent({
  name: 'TreeSelectDemo1',
  setup(){
    const value = ref()
    const fieldNames = computed(() => ({
      children: 'children',
      label: 'names',
      value: 'id'
    }))
    const treeData = ref([
      {
        names: 'parent 1',
        id: '1-1-1',
        children: [
          {
            names: 'parent 1-0',
            id: '1-0-0',
            children: [
              {
                names: 'my leaf',
                id: 'leaf1'
              },
              {
                names: 'your leaf',
                id: 'leaf2'
              }
            ]
          },
          {
            names: 'parent 1-1',
            id: '1-1-0'
          }
        ]
      }
    ])
    return {
      fieldNames,
      value,
      treeData
    }
  }
})
</script>
